<template>
    <div class="box">
        <div class="one">
            <div class="title">
                <Title :title="props.dataRightOne.objR1.title"></Title>
            </div>
            <div class="bar">
                <Bar :barOptions="props.dataRightOne.objR1.barOptions"></Bar>
            </div>
        </div>
        <div class="two">
            <div class="title">
                <Title :title="props.dataRightTwo.objR2.title"></Title>
            </div>
            <div class="mian2">
                <div class="btnList2">
                    <div class="btn1">历史预警</div>
                    <div class="btn1">当前预警</div>
                </div>
                <div class="list">
                    <div class="list-top">
                        <div class="one">地点</div>
                        <div class="one">报告类型</div>
                        <div class="one">时间</div>
                        <div class="one">说明</div>
                    </div>
                    <div class="mian_l">
                        <div class="mian_lItem" v-for="(item, key) in props.dataRightTwo.objR2.listData.listMain"
                            :key="key">
                            <div> {{ item.place }} </div>
                            <div> {{ item.type }} </div>
                            <div> {{ item.time }} </div>
                            <div> {{ item.detail }} </div>
                        </div>
                    </div>

                    <ul class="list_2">
                        <li v-for="(item, key) in props.dataRightTwo.objR2.listData.waringList" :key="key">
                            <span class="time_dian"></span>
                            <div class="text">
                                <div>{{ item.time }}</div>
                                <div>{{ item.name }}</div>
                            </div>

                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import Bar from '@/components/Bar.vue'
import Title from '@/pages/compontents/title/index.vue'
import { defineProps, onMounted } from 'vue'
const props = defineProps({
    dataRightOne: {
        type: Object,
        default: {}
    },
    dataRightTwo: {
        type: Object,
        default: {}
    },
})
onMounted(() => {
    console.log(props.dataRightTwo, 123);
    console.log(props.dataRightOne, 1234);
})
</script>

<style scoped src="./index.css"></style>